ㄧ.基礎導欄

<div id="demo" class="component container">
  <ul class="nav justify-content-center nav-pills nav-justified">
    <li class="nav-item"><a href="" class="nav-link active">HTML</a></li>
    <li class="nav-item"><a href="" class="nav-link">CSS</a></li>
    <li class="nav-item"><a href="" class="nav-link">JavaScript</a></li>
  </ul>
</div>



#demo.component{
  padding: 50px;
}

重點：
1.可使用網格系統的水平對齊，也可用垂直排列.flex-column
2. .nav-pills為片狀樣式
3. .nav-tabs為分頁標籤樣式
4. .nav-fill為佔用整個水平位置

codepen
參考：bootstrap4